<template>
	<div class="cho-tab2 cho2-swiper swiper">
		<div>
			<router-link to="/">
				<img :src="tabs2List[0].imgURL"/>
				<p>{{tabs2List[0].title}}——{{tabs2List[0].msg+tabs2List[0].city}}</p><em>￥{{tabs2List[0].price}}</em>
			</router-link>
		</div>
		<ol class="swiper-wrapper">
			<li v-for="it in tabs2List[1]" :key="it.id" class="swiper-slide">		
				<router-link to="/" v-if="it.id>1">
					<article>
						<img :src="it.imgURL"/>
						<p>{{it.city}}</p>
					</article>
					<aside>
						<label>{{it.title}}</label>
						<h3>{{it.msg}}</h3>
						<p>￥{{it.price}}</p>
					</aside>
				</router-link>
			</li>
		</ol>
		<button>查看更多</button>
	</div>
</template>

<script>
	import {onMounted} from 'vue'
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination
	} from 'swiper'
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	export default{
		name:'ChoiceTab2',
		data(){
			return{
				tabs2List : [
					{id:1,imgURL:'imgs/tab2-4.webp',title:'长隆野生动物世界',msg:'《爸爸去哪儿》拍摄地',city:'广州出发',price:286},
					[
						{id:2,imgURL:'imgs/tab2-1.jpg',title:'帽子峰旅游景区',msg:'有“粤北九寨沟”之美誉',city:'广州出发',price:47.6},
						{id:3,imgURL:'imgs/tab2-2.jpg',title:'长隆欢乐世界',msg:'《奔跑吧兄弟》拍摄地',city:'广州出发',price:223},
						{id:4,imgURL:'imgs/tab2-3.jpg',title:'深圳野生动物园',msg:'观赏世界各地珍禽名兽',city:'广州出发',price:99},
						{id:5,imgURL:'imgs/tab2-4.jpg',title:'留园',msg:'中国著名古典园林',city:'广州出发',price:22.5},
						{id:6,imgURL:'imgs/tab2-5.jpg',title:'虎丘山风景名胜区',msg:'来苏州不游虎丘,乃憾事也',city:'广州出发',price:30},
						{id:7,imgURL:'imgs/tab2-6.jpg',title:'白马涧龙池景区',msg:'灵山秀水，城市绿肺',city:'广州出发',price:55},
					]
				]
			}
		},
		setup(){
			onMounted(()=>{
				new Swiper('.cho2-swiper',{
					slidesPerView:3,
					slidesPerGroup: 3,
				})
			})
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
	}
	.cho-tab2{
		padding-top: 0.1rem;
		height: 10.5rem;
	}
	.cho-tab2 div{
		width: 100%;
		height: 50%;
	}
	.cho-tab2 div a img{
		width: 100%;
		height: 100%;
	}
	.cho-tab2 div a p{
		width: 80%;
		height: 14%;
		float: left;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		position: relative;
		bottom: 1.4rem;
		color: white;
		background: rgba(0,0,0,0.7);
		padding-top: 0.5rem;
	}
	.cho-tab2 div a em{
		width: 15%;
		height: 14%;
		float: right;
		text-align: right;
		position: relative;
		bottom: 1.4rem;
		color: white;
		background: rgba(0,0,0,0.7);
		padding-top: 0.5rem;
		padding-right: 5%;
		color: #FFA500;
		font-weight: bold;
	}
	.cho-tab2 ol{
		height: 25%;
		position: relative;
		bottom: 1.1rem;
	}
	.cho-tab2 ol li{
		width: 32%;
		height: 100%;
	}
	.cho-tab2 ol li article img{
		width: 99%;
		height: 99%;
		border-radius: 0.3rem;
	}
	.cho-tab2 ol li article p{
		color: white;
		background: rgba(0,0,0,0.7);
		width: 1.5rem;
		line-height: 0.5rem;
		text-align: center;
		border-radius: 0.3rem;
		position: relative;
		bottom: 1.7rem;
		
	}
	.cho-tab2 ol li aside{
		position: relative;
		bottom: 0.4rem;
	}
	.cho-tab2 ol li aside label{
		width: 80%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #000000;
	}
	.cho-tab2 ol li aside h3{
		width: 95%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #DCDCDC;
		padding: 0.2rem;
		font-size: 0.35rem;
	}
	.cho-tab2 ol li aside p{
		color: #FFA500;
		font-weight: bold;
		font-size: 0.4rem;
	}
	.cho-tab2 button{
		width: 100%;
		height: 10%;
		background: white;
		border: 0.01rem solid gainsboro;
		border-radius: 0.3rem;
	}
</style>
